<template>
	<view class="result">
		<navbar></navbar>
		<textNavbar myprops="搜索"></textNavbar>
		<uni-search-bar v-model="searchValue" :radius="50" clearButton="none" cancelButton="none" bgColor="#EDEDED" @confirm="search" />
		<view class="result-content">
			<tui-tabs :tabs="tabs"
				:currentTab="currentTab" 
				@change="changes" 
				bold="true"
				selectedColor="black"
				sliderWidth="50"
				sliderBgColor="black"
				>
			</tui-tabs>
			<view class="" v-show="currentTab == 0">
				<view v-for="(item,index) in datas" :key="index" class="bbb">
					<tui-collapse :arrow="false" :index="index" :current="item.current" :disabled="item.disabled" @click="changed">
						<template v-slot:title>
								<view class="profile">
									<image src="../../static/首页路径.png" mode="" style="width: 80rpx; height: 80rpx;"></image>
									<view class="profile-view">
										<view class="profile-view-text">
											<text style="font-size: 28rpx;font-weight: bold;line-height: 32rpx; color: #616C9A;">彭梓芳</text>
											<text style="font-size: 22rpx; color: #383838; margin: 0 22rpx 0 2rpx;">律师</text>
											<text style="font-size: 22rpx; color: #383838;">执业13年</text>
										</view>
										<view class="profile-view-twotext">
											<text class="text1">解答<text style="color: red;"> 103.5万</text>次</text>
											<text class="text1">好评率 <text style="color: red;">98.23%</text></text>
											<text class="text1">感谢 <text style="color: red;">7892</text>个</text>
										</view>
									</view>
									<view class="a1">
										<image :src="item.current === index ? image2 : image1 " mode="" style="width: 48rpx; height: 48rpx;"></image>
									</view>
								</view>
						</template>
						<template v-slot:content>
							<view class="tui-content">
								<view class="profile-six">
										<view class="profile-six-one">
											<image src="../../static/健康咨询@2x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">私问</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">10083次</text>
										</view>
										<view class="profile-six-one">
											<image src="../../static/入学考试@1x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">文书代写</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">10083次</text>
										</view>
										<view class="profile-six-one">
											<image src="../../static/20gl-phoneTime@1x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">计时电话</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">10083次</text>
										</view>
										<view class="profile-six-one">
											<image src="../../static/产品定位红.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">畅聊指导</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">10083次</text>
										</view>
										<view class="profile-six-one">
											<image src="../../static/洗钱审查@1x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">合同审查</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">10083次</text>
										</view>
										<view class="profile-six-one">
											<image src="../../static/线下见面@1x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">立案指导</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">10083次</text>
										</view>
									</view>
							</view>
						</template>
					</tui-collapse>
				</view>
			</view>
			<view class=""  v-show="currentTab == 1">
				<view v-for="(item,index) in dataList" :key="index" class="bbb">
					<tui-collapse :arrow="false" :index="index" :current="item.current" :disabled="item.disabled" @click="change">
						<template v-slot:title>
								<view class="profile">
									<image src="../../static/首页路径.png" mode="" style="width: 80rpx; height: 80rpx;"></image>
									<view class="profile-view">
										<view class="profile-view-text">
											<text style="font-size: 28rpx;font-weight: bold;line-height: 32rpx; color: #616C9A;">彭梓芳</text>
											<text style="font-size: 22rpx; color: #383838; margin: 0 22rpx 0 2rpx;">律师</text>
											<text style="font-size: 22rpx; color: #383838;">执业13年</text>
										</view>
										<view class="profile-view-twotext">
											<text class="text1">解答<text style="color: red;"> 103.5万</text>次</text>
											<text class="text1">好评率 <text style="color: red;">98.23%</text></text>
											<text class="text1">感谢 <text style="color: red;">7892</text>个</text>
										</view>
									</view>
									<view class="a1">
										<image :src="item.current === index ? image2 : image1 " mode="" style="width: 48rpx; height: 48rpx;"></image>
									</view>
								</view>
						</template>
						<template v-slot:content>
							<view class="tui-content">
								<view class="profile-six">
										<view class="profile-six-one">
											<image src="../../static/健康咨询@2x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">私问</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">10083次</text>
										</view>
										<view class="profile-six-one">
											<image src="../../static/入学考试@1x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">文书代写</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">10083次</text>
										</view>
										<view class="profile-six-one">
											<image src="../../static/20gl-phoneTime@1x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">计时电话</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">10083次</text>
										</view>
										<view class="profile-six-one">
											<image src="../../static/产品定位红.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">畅聊指导</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">10083次</text>
										</view>
										<view class="profile-six-one">
											<image src="../../static/洗钱审查@1x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">合同审查</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">10083次</text>
										</view>
										<view class="profile-six-one">
											<image src="../../static/线下见面@1x.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
											<text class="profile-six-one-text1">立案指导</text>
											<text style="font-size: 16rpx; color: #A6A6A6; color: #A6A6A6;">10083次</text>
										</view>
									</view>
							</view>
						</template>
					</tui-collapse>
				</view>
			</view>
			<view class="Inv1"  v-show="currentTab == 2">
				<view class="Inv1-vw">
					<view class="Inv1-vw-left">
						<view class="">刑</view>
						<text class="text3">大学毕业后，档案去哪儿了?</text>
					</view>
					<text class="text4">到机关、国有企事业单位就业或定向招生就业的，档案转递至就业单位或定向单位。到非公单位55555555555555</text>
					<view class="Inv1-view">
						<view class="" style="margin-right: 74rpx;"><image src="../../static/眼睛@1x.png" style="width: 24rpx; height: 24rpx;"></image>119</view>
						<view class=""><image src="../../static/点赞@1x.png" style="width: 24rpx; height: 24rpx;"></image>0</view>
					</view>
					<view class="Inv1-vw-bottom">
						<image src="../../../static/头像.png" mode=""></image>
						<text class="textchen">陈全锦</text>
						<text class="textlv">律师</text>
						<text class="textjie">解答116.1万次</text>
					</view>
				</view>
			</view>
			<view class=""  v-show="currentTab == 3">000</view>
			<view class=""  v-show="currentTab == 4">444</view>
		</view>
	</view>
</template>

<script>
	import tuiTabs from "@/components/thorui/tui-tabs/tui-tabs.vue"
	import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue"
	import tuiButton from "@/components/thorui/tui-button/tui-button.vue"
	import tuiCollapse from "@/components/thorui/tui-collapse/tui-collapse.vue"
	export default {
		components:{
			tuiIcon, tuiButton, tuiCollapse, tuiTabs
		},
		data() {
			return {
				searchValue: '',
				currentTab: 0,
				image1: '../../../static/分组 11@1x.png',
				image2: '../../../static/分组 10@1x.png',
				datas: [{current: -1,}],
				tabs: [
					{
						name: "综合"
					}, {
						name: "找律师"
					}, {
						name: "专业问答"
					},{ 
						name: '法律问题'
					}, { 
						name: '法律知识'},
				],
				dataList: [
					{
						intro: "",
						current: -1,
					},
					{
						intro: "",
						current: -1,
					},
					{
						intro: "",
						current: -1,
					},
				],
			}
		},
		onLoad(option) {
			console.log(option.value);
			if (option.value) {
				this.searchValue = option.value
			}
		},
		methods: {
			// 找律师折叠面板逻辑
			change(e) {
				let index = e.index;
				let item = this.dataList[index];
				item.current = item.current == index ? -1 : index
				console.log(item);
			},
			// 综合折叠面板逻辑
			changed(e) {
				let index = e.index;
				let item = this.datas[index];
				item.current = item.current == index ? -1 : index
				console.log(item);
			},
			// 标签页切换事情
			changes(e) {
				this.currentTab = e.index
				console.log(this.currentTab );
			},
		}
	}
</script>

<style scoped lang="scss">
	.result {
		width: 100vw;
		height: 100vh;
	}
	.bbb {
		margin-bottom: 6px;
		border-radius: 12px;
		border-bottom: 1px solid #EDEDED;
	}
	
	.profile {
		width: 600rpx;
		height: 72px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 20rpx;
		border-radius: 12px;
	}
	
	.profile > image {
		width: 80rpx;
		height: 80rpx;
	}
	.profile-view {
		width: 460rpx;
		height: 66rpx;
		font-weight: bold;
		line-height: 32rpx;
		display: flex;
		flex-direction: column;
		margin-left: 16rpx;
	}
	
	.text1 {
		font-size: 22rpx;
		// line-height: 26rpx;
		color: #A6A6A6;
	}
	
	.profile-view-twotext {
		width: 230px;
		display: flex;
		justify-content: space-between;
	}
	
	.a1 {
		position: relative;
		top: 0;
		left: 40px;
	}
	
	.profile-six {
		width: 668rpx;
		height: 128rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.profile-six-one {
		width: 108rpx;
		height: 128rpx;
		border-radius: 8rpx;
		background-color: #EFEFEF;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.profile-six-one-text1 {
		font-size: 20rpx;
		line-height: 24rpx;
		text-align: center;
		color: #383838;
		margin: 8rpx 0 0 4rpx;
	}
	
	.profile-six {
		width: 668rpx;
		height: 128rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.profile-six-one {
		width: 108rpx;
		height: 128rpx;
		border-radius: 8rpx;
		background-color: #EFEFEF;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.profile-six-one-text1 {
		font-size: 20rpx;
		line-height: 24rpx;
		text-align: center;
		color: #383838;
		margin: 8rpx 0 0 4rpx;
	}
	.tui-content {
		height: 90px;
		background-color: white;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 12px;
	}
	
	.Inv1 {
		width: 100vw;
		height: 100%;
		overflow: hidden;
	}
	.Inv1-vw {
		width: 694rpx;
		height: 282rpx;
		margin: 32rpx 0 0 28rpx;
		border-bottom: 2rpx solid #F0F0F0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.Inv1-vw-left {
		display: flex;
		height: 25px;
	}
	.Inv1-vw-left > view {
		width: 23px;
		height: 23px;
		background-color: #1f4c7e;
		border-radius: 50% 50% 50% 20%;
		color: white;
		font-size: 14px;
		text-align: center;
		line-height: 23px;
	}
	.text3 {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		line-height: 50rpx;
		color: #383838;
		margin-left: 10rpx;
	}
	.text4 {
		width: 694rpx;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 32rpx;
		color: #4D4D4D;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;  
		overflow: hidden;
	}
	.Inv1-view {
		display: flex;
		color: #A6A6A6;
		align-items: center;
	}
	.Inv1-vw-bottom {
		height: 40px;
		display: flex;
		align-items: center;
	}
	.Inv1-vw-bottom > image {
		width: 30px;
		height: 30px;
	}
	.Inv1-vw-bottom > .textchen {
		margin-left: 5px;
	}
	.Inv1-vw-bottom > .textlv {
		font-size: 14px;
		margin: 0 5px 0 5px;
	}
	.Inv1-vw-bottom > .textjie {
		font-size: 15px;
		color: #a59999;
	}
</style>
